Application: <%= @itunes.name %>
<br />
<br />
Playlist: <%= @playlist.name %><br />
Title	: <%= @track.artist %> - <%= @track.name %>  (<%= @track.genre %>)
<br />
<br />
<%=link_to "play", :action => :play%>
<%=link_to "pause", :action => :pause%>
<%=link_to "stop", :action => :stop%>




<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Strict//EN" 
		"http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w4.org/1999/xhtml"
		xmlns:x2="http://www.w3.org/TR/xhtml2"
		xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
		xmlns:state="http://www.w3.org/2005/07/aaa">

<head>
<title>slider test</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/screen.css" ></link>

<%= javascript_include_tag 	"prototype",
							"effects",
							"yui/yahoo",
                            "yui/dom",
                            "yui/event",
                            "yui/dragdrop",
                            "yui/slider"%></head>

<body>
<script language="JavaScript"> 
var horizontalSlider;
function init() {
	horizontalSlider = YAHOO.widget.Slider.getHorizSlider("horizBGDiv", 
                       "horizHandleDiv", 0, 100, 25);

	

	horizontalSlider.onChange = function(offsetFromStart) {
		document.getElementById("horizVal").value = offsetFromStart;
		document.getElementById("horizBGDiv").title = 
                    "Horizontal Slider, value = " + offsetFromStart;
	};

    horizontalSlider.onSlideStart = function() {
        //alert("slidestart");
        YAHOO.log("HORIZ slidestart", "warn");
    };

    horizontalSlider.onSlideEnd = function() {
        // alert("slideend");
        YAHOO.log("HORIZ slideend", "warn");
    };

}


function updateHoriz() {
    var fld = document.forms["formH"]["horizVal"];
	var v = parseFloat(fld.value, 10);
	if ( isNaN(v) ) v = 0;
	horizontalSlider.setValue(Math.round(v));
    var newVal = horizontalSlider.getValue();
    if (v != newVal) {
        fld.value = newVal;
    }
	return false;
}
	window.onload = init;
</script>


<% volume = "<script type='text/javascript'>return updateHoriz();</script>"%>

<div id="horizWrapper">
     <div
         id="horizBGDiv"
         name="horizBGDiv"
         tabindex="0" 
         x2:role="role:slider" 
         state:valuenow="0" 
         state:valuemin="-100" 
         state:valuemax="100"
         title="Horizontal Slider" 
         >
       <div id="horizHandleDiv" 	 onkeydown="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event));" 
         onkeypress="YAHOO.util.Event.preventDefault(YAHOO.util.Event.getEvent(event))"><img alt="" src="/images/horizSlider.png" /></div> 

    <div id="horizValueDiv">
        <form name="formH" onsubmit="return updateHoriz()">		
		<%= text_field_tag(:horizVal, value = "0" ) %>
		<input type="button" value="Update" onclick="updateHoriz()" />
        </form>

    </div>
</div>
</body>
</html>
<%= observe_field(	:horizVal,
					:frequency => 1,
  					:update => "volume",
  					:url => {:action => :slider}) %>



<div id="volume">Volume:</div>
